<template>
    <div class="page">
        <div class="search">
            <van-search v-model="customerNo" placeholder="请输入搜索关键词" @search="search" @cancel="search" />
        </div>
        <div class="top-card">
            <img class="bg" style="min-height: 160px" src="@/assets/bg.png" alt="" />
            <div class="cont">
                <div class="top">累计交易</div>
                <div class="center">
                    {{ numS.AMOUNT ? Number(numS.AMOUNT).toFixed(2) : '0' }}
                </div>
                <div class="bottom">
                    <div class="item">
                        <div class="l">总笔数</div>
                        <div class="r">{{ numS.NUM || 0 }}</div>
                    </div>
                    <div class="item">
                        <div class="l">刷卡</div>
                        <div class="r">{{ numS.NORMAL || 0 }}</div>
                    </div>
                    <div class="item">
                        <div class="l">闪付</div>
                        <div class="r">{{ numS.YSF || 0 }}</div>
                    </div>
                    <div class="item">
                        <div class="l">扫码</div>
                        <div class="r">{{ numS.QRCODE || 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getSearchTransListByParam">
                <div class="item" v-for="(item, index) in list" :key="index">
                    <div class="item-top" style="display: flex; align-items: center">
                        <div style="flex: 1; display: flex">
                            {{ item.CUSTOMER_NAME }}
                            <div style="font-size: 0.2rem; padding: 0.05rem 0.1rem">{{ item.SETTLE_TYPE }}</div>
                        </div>
                        <div>{{ item.AMOUNT }}</div>
                    </div>
                    <div class="item-bottom" style="display: flex; align-items: center; color: #bababa; font-size: 0.25rem">
                        <div style="flex: 1">{{ item.CUSTOMER_NO }}</div>
                        <div>{{ item.TRANS_STATUS == 'SUCCESS' ? '交易成功' : '交易失败' }}</div>
                    </div>
                </div>
                <div>
                    <empty v-if="!list.length"></empty>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
import { searchTransCountByParam, searchTransListByParam } from '@/api/agent'
import store from '@/store/index'

export default {
    name: 'tradingDetail',
    components: {},

    data() {
        return {
            userInfo: {},
            detailData: {},
            isDirectly: 'Y',
            numS: {},
            hasData: true,
            list: [],
            loading: false,
            finished: false,
            customerNo: '',
            agentNo: '',
            pageNum: 1,
            transTimeStart: ''
        }
    },
    mounted() {
        console.log(this.$route.query)
        this.agentNo = this.$route.query.agentNo
        this.detailData = JSON.parse(this.$route.query.item)
        this.isDirectly = this.$route.query.isDirectly
        this.transTimeStart = this.detailData.statisDate

        this.getSearchTransCountByParam()
    },
    methods: {
        search() {
            this.list = []
            this.pageNum = 1
            this.getSearchTransCountByParam()
            this.getSearchTransListByParam()
        },
        getSearchTransCountByParam(e) {
            searchTransCountByParam({
                agentNo: this.agentNo, // 服务商编码
                isDirect: this.isDirectly, // 是否直属交易
                transTimeStart: this.transTimeStart,
                transTimeEnd: this.transTimeStart,
                currentPage: this.pageNum,
                minAmount: '',
                maxAmount: '',
                customerNo: this.customerNo,
                transType: '',
                settleType: ''
            }).then(res => {
                this.numS = res.object
            })
        },
        getSearchTransListByParam(e) {
            searchTransListByParam({
                agentNo: this.agentNo, // 服务商编码
                isDirect: this.isDirectly, // 是否直属交易
                transTimeStart: this.transTimeStart,
                transTimeEnd: this.transTimeStart,
                currentPage: this.pageNum,
                minAmount: '',
                maxAmount: '',
                customerNo: this.customerNo,
                transType: '',
                settleType: ''
            }).then(res => {
                if (res.object.length < 10) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.pageNum++
                    this.loading = false
                    this.finished = false
                }
                this.list = this.list.concat(res.object)
            })
        }
    }
}
</script>

<style lang="scss">
.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.head {
    background: #ffffff;
    border-radius: 15px;
    opacity: 1;
    display: flex;
    align-items: center;
    height: 35px;
    .btn {
        width: 61px;
        height: 100%;
        background: #ff7c13;
        border-radius: 0px 15px 15px 0px;
        opacity: 1;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.top-card {
    position: relative;
    .bg {
        width: 100%;
    }
    .cont {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 1;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
            font-size: 14px;
            // font-family: Segoe UI-Regular, Segoe UI;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
        }
        .center {
            font-size: 26px;
            // font-family: Segoe UI-Regular, Segoe UI;
            font-weight: 400;
            color: #ffffff;
            padding: 10px;
            text-align: center;
        }
        .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item {
                display: flex;
                font-size: 13px;
                // font-family: Segoe UI-Regular, Segoe UI;
                font-weight: 400;
                color: #ffffff;
                .r {
                    margin-left: 15px;
                }
            }
        }
    }
}
.list {
    flex: 1;
    overflow: scroll;
    padding: 0 10px;
    .item {
        padding: 10px;
        border-radius: 10px;
        line-height: 25px;
        margin-top: 10px;
        background: white;
    }
}
</style>
